<template>
  <div class="more-todo">
    <div class="table-container">
      <el-table
              ref="todoTable"
              :data="todoList"
              stripe
              tooltip-effect="dark"
              style="width: 100%"
              :header-cell-style="headStyle"
              :cell-style="tableStyle">
        <el-table-column show-overflow-tooltip label="待办标题">
          <template slot-scope="scope">
            <div class="todo-item">
              <a href="javascript:void(0);" @click="openMenuFunction(scope.row)">{{scope.row.todoTitle}}</a>
            </div>
          </template>
        </el-table-column>

        <!--<el-table-column label="跟踪状态" width="150" align="center">
          <template slot-scope="scope">
            <div class="todo-track">
              <i :class="scope.row.trackFlag === 'Y'?'el-icon-star-on':'el-icon-star-off'" :title="tipsCon"
                 @click="trackFunction(scope.row,scope.row.trackFlag)"
                 @mouseover="trackTipsFun(scope.row.trackFlag)"></i>
            </div>
          </template>
        </el-table-column>-->

        <el-table-column
                prop="fromUserName"
                label="来源"
                align="center"
                width="150"
                show-overflow-tooltip>
        </el-table-column>
        <el-table-column
                prop="ts"
                label="时间"
                width="250"
                align="center"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    {{scope.row.ts.slice(0,10)}}
                </template>
        </el-table-column>
      </el-table>

      <custom-pagination
              :totalPages="pageController.totalPage"
              :totalNum="pageController.totalNumber"
              :currentPage="pageController.pageNumber"
              :perPageSuggestion="pageSizeSuggestion"
              :defaultPageSize="pageController.pageSize"
              @perPageChange="handlePerPageChange"
              @toFirstPage="toFirstPage"
              @toLastPage="toLastPage"
              @toNextPage="toNextPage"
              @toEndPage="toEndPage"
              @toTargetPage="toTargetPage"
      >
      </custom-pagination>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const { mapState:tagState,  } = createNamespacedHelpers('tagModule');
import CustomPagination from '../componentStore/common/CustomPagination';
import appUtil from '~/assets/utils/appUtil';
export default {
    name: 'more-todo',
    components: {
        CustomPagination,
    },
    data() {
        return {
            todoList: [],
            tipsCon: '',

            pageSizeSuggestion: [12, 15, 20, 25, 30],
            pageController: {
                pageNumber: 1,
                pageToJump: 1,
                pageSize: 10,
                totalPage: 1,
                totalNumber: 0,
            },

            headStyle: {
                'font-size': '15px',
                'background-color': '#F5F8FC'
            },
            tableStyle: {
                'cursor': 'pointer',
                'font-size': '15px',
            },
        };
    },
    computed: {
        ...tagState({
            activeTag:state => state.activeTag,
        }),
    },
    watch:{
        activeTag(){
            console.log(this.activeTag);
            if(this.activeTag.url==='index'){
                //this.getList(this.config[3]); // 征求意见
            }
        }
    },
    created(){
        console.log(this.activeTag);
        this.getTodoList(this.pageController);
    },
    methods: {
        // 获取待办
        getTodoList(target){
            this.$axios.get('/ptp-msg/apis/todo?pn=' + target.pageNumber + '&ps=' + target.pageSize + '&userCode=' + appUtil.getSes('userCode'))
                .then(res => {
                    this.todoList = res.data.data.todoList;
                    this.pageController = Object.assign({}, this.pageController, res.data.data.pageData);
                });
        },
        // 打开详情
        openMenuFunction(payload){
            let urlR = payload.msgUrl;
            window.parent.addTabToParent(payload.todoTitle,urlR);
        },
        trackFunction(row,iconState){
            console.log(iconState);
            this.$axios.post('/ptp-msg/apis/track/'+row.id).then(() => {
                //console.log(row, iconState)
                if(iconState === 'N'){
                    row.trackFlag = 'Y';
                    this.$message.success('已添加跟踪');
                }else{
                    row.trackFlag = 'N';
                    this.$message.warning('已取消跟踪');
                }
            });
        },
        trackTipsFun(iconState){
            if(iconState === 'N'){
                this.tipsCon = '添加跟踪事项';
            }else{
                this.tipsCon = '取消跟踪';
            }
        },
        handlePerPageChange(pageSize){
        //如果切换每页数量后不存在当前页，则自动加载最后一页数据
            let target = {
                pageNumber: 1,
                pageSize: pageSize
            };
            //重新算出当前页第一条数据的序号，以便重新加载表格
            //this.pageController.pageNumber = (this.pageController.currentPage - 1) * pageSize;
            this.getTodoList(target);
        },
        toFirstPage(){
            this.toTargetPage(1);
        },
        toLastPage(){
            let target = this.pageController;
            if(target.pageNumber > 1){
                this.toTargetPage(target.pageNumber - 1);
            }
        },
        toNextPage(){
            let target = this.pageController;
            if(target.pageNumber < target.totalPage){
                this.toTargetPage(target.pageNumber + 1);
            }
        },
        toEndPage(){
            this.toTargetPage(this.pageController.totalPage);
        },
        //跳转到对应页面，forceUpdate为强制刷新，传入该参数后即使页码不变也要重新请求页面数据
        toTargetPage( pageNumber, forceUpdate ){
            pageNumber = parseInt(pageNumber);
            let target = this.pageController;

            if(!(pageNumber > 0 && pageNumber <= this.pageController.totalPage)){
                this.$message.warning('页码无效');
                return;
            }
            if(forceUpdate || this.pageController.pageNumber !== pageNumber){
                target.pageNumber= pageNumber;
                this.getTodoList(target);
            }
        },
    }
};
</script>

<style scoped>
.more-todo{
  width: 100%;
  text-align: center;
  background-color: white;
  height: 99%;
}

.table-container{
  width: 80%;
  margin: auto;
  height: 92%;
  padding: 30px;
  overflow: auto;
}

</style>